import {  Input, Space, Table, Tag,  Spin,  Pagination,  Descriptions,message,Button} from "antd"
import { AddAdmin } from "../../api/admin";
import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom';
import "../../css/order.css";
import React from 'react';
const { TextArea } = Input;
const Add = () => {
    const navigate = useNavigate();
    const [name, setName] = useState('');
    const [explain, setExplain] = useState('');
    const [account,setAccount]=useState('');
    const [loading, setLoading] = React.useState(false);
    const handleNameChange = (e) => {
        setName(e.target.value);
    };
    const handleExplainChange = (e) => {
        setExplain(e.target.value);
    };
    const handleAccountChange=(e)=>{
        setAccount(e.target.value);
    }
      const add=async()=>{
        setLoading(true)
        await AddAdmin({
            account:account,
            name: name,
            explain: explain
        }).then((res) => {
            if (res.result === 0) {
                setLoading(false)
                message.success('添加成功', 1.5);
                navigate(`/admin`);
            }
        })
      }  


    const items = [
        {
            key: '1',
            label: '名称',
            children: <Input value={name} onChange={handleNameChange} />,
            span: 3,
        },
        {
            key: '2',
            label: '电话',
            children: <Input value={account} onChange={handleAccountChange}  />,
            span: 3,
        },
        {
            key: '3',
            label: '描述',
            children:   <TextArea rows={3} maxLength={6} value={explain} onChange={handleExplainChange} />,
            span: 3,
        },
        {
            key: '4',
            label: '行为',
            children: <Button type="primary" onClick={() => add()} >新增</Button>,
            span: 3,
        },
    ]

      
    return(
        <div className="exam-container">
             <Spin spinning={loading} delay={500}>
            <Descriptions title="新增管理员" layout="vertical" bordered items={items} />
            </Spin>
        </div>
    )
}
export default Add